<template>
	<view class="content">
		<u-navbar :background="navObj" :is-back="false" :is-fixed="true" height="89" width="100%">
			<div class="title">我的订单</div>

			<view class="left-box" @tap="onClickLeft">
				<u-icon name="arrow-left" size="40" color="#FFF"></u-icon>
			</view>
		</u-navbar>
		<view class="navbar">
			<view v-for="(item, index) in navList" :key="index" class="nav-item"
				:class="{ current: tabCurrentIndex === index }" @click="tabClick(index)">{{ item.text }}</view>
		</view>
		<swiper :current="tabCurrentIndex" class="swiper-box" duration="300" @change="changeTab">
			<swiper-item class="tab-content" v-for="(tabItem, tabIndex) in navList" :key="tabIndex">
				<scroll-view class="list-scroll-content" scroll-y @scrolltolower="loadData(tabIndex)">
					<!-- 空白页 -->
					<u-empty text="暂无订单" mode="list" v-if="tabItem.loaded === true && tabItem.orderList.length === 0">
					</u-empty>
					<!-- 订单列表 -->
					<view class="seller-view" :key="oderIndex" v-for="(order, oderIndex) in tabItem.orderList">
						<view class="seller-info u-flex u-row-between">
							<view class="seller-name wes" @click="navigateToStore(order)">
								<view class="name wes">{{ order.storeName }}</view>
							</view>
							<view class="order-sn">{{order.status == 0 ? '待支付' : order.status == 1 ? '待发货' :
								order.status == 2 ? '待收货' : order.status == 3 ? '已收货' : '已完成' }}</view>
						</view>
						<view>
							<view v-if="order.status != 0">
								<view class="goods-item-view" @click="navigateToOrderDetail(order.id)">
									<view class="goods-img">
										<u-image border-radius="6" width="100%" height="100%" :src="order.image">
										</u-image>
									</view>

									<view class="goods-name">
										{{order.name}}
									</view>

									<view class="goods-price">
										¥{{order.price}}
									</view>

									<view class="goods-num">
										{{order.specifications}} x{{order.num}}
									</view>

									<view class="goods-sku">

									</view>

								</view>
							</view>


							<view v-else>
								<view class="goods-item-view" v-for="item in order.userOrderPageSonRes">
									<view class="goods-img">
										<u-image border-radius="6" width="100%" height="100%" :src="item.image">
										</u-image>
									</view>

									<view class="goods-name">
										{{item.name}}
									</view>

									<view class="goods-price">
										¥{{item.price}}
									</view>

									<view class="goods-num">
										{{item.specifications}} x{{item.num}}
									</view>

									<view class="goods-sku">

									</view>

								</view>
							</view>

							<view class="shifukuan">
								实付款 ¥{{order.allPrice}}
							</view>
							<view class="btn-view u-flex" style="justify-content: flex-end;">
								<view class="goods-btn flex flex-a-c">
									<view ripple class="pay-btn" shape="circle" size="mini" v-if="order.status == 0"
										@click="waitPay(order)">立即付款</view>
									<!-- <view ripple class="cancel-btn" shape="circle" size="mini" v-if="order.status == 0" @click="onCancel(order.id)">
										删除订单
									</view> -->
									<view ripple shape="circle" class="pay-btn" size="mini" v-if="order.status == 2"
										@click="onRog(order.id)">
										确认收货
									</view>
								</view>
							</view>
						</view>
					</view>
					<uni-load-more :status="tabItem.loadStatus"></uni-load-more>
				</scroll-view>
			</swiper-item>
		</swiper>
		<u-toast ref="uToast" />
		<u-modal :confirm-color="lightColor" v-model="rogShow" :show-cancel-button="true" :content="'是否确认收货?'"
			@confirm="confirmRog"></u-modal>
	</view>
</template>

<script>
import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue";
import storage from "@/utils/storage.js";
import {
	getOrderList,
	cancelOrder,
	confirmReceipt,
	orderPay
} from "@/api/order.js";
import {
	getClearReason
} from "@/api/after-sale.js";
import LiLiWXPay from "@/js_sdk/lili-pay/wx-pay.js";
export default {
	components: {
		uniLoadMore,
	},
	data() {
		return {
			navObj: {
				backgroundColor: 'rgb(25, 189, 93)',
			},
			lightColor: this.$lightColor,
			tabCurrentIndex: 0, //导航栏索引
			navList: [
				//导航栏list
				// {
				// 	state: 0,
				// 	text: "全部",
				// 	loadStatus: "more",
				// 	orderList: [],
				// 	pageNumber: 1,
				// },
				{
					state: 1,
					text: "待付款",
					loadStatus: "more",
					orderList: [],
					pageNumber: 1,
				},
				{
					state: 2,
					text: "待发货",
					loadStatus: "more",
					orderList: [{ name: '1' }],
					pageNumber: 1,
				},
				{
					state: 3,
					text: "待收货",
					loadStatus: "more",
					orderList: [],
					pageNumber: 1,
				},
				{
					state: 4,
					text: "已完成",
					loadStatus: "more",
					orderList: [],
					pageNumber: 1,
				},
			],
			status: "", //接收导航栏状态
			params: {
				pageNumber: 1,
				pageSize: 10,
				tag: "0",
			},
			orderStatus: [
				//订单状态
				// {
				// 	orderStatus: "0", //全部
				// },
				{
					orderStatus: "0", //代付款
				},
				{
					orderStatus: "1",
				},
				{
					orderStatus: "2", //待收货
				},
				{
					orderStatus: "3", //已完成
				},

			],
			cancelShow: false, //是否显示取消
			orderSn: "", //ordersn
			reason: "", //取消原因
			cancelList: "", //取消列表
			rogShow: false, //显示是否收货
		};
	},

	/**
	 * 跳转到个人中心
	 */
	onBackPress(e) {
		if (e.from == "backbutton") {
			uni.switchTab({
				url: "/pages/tabbar/user/my",
			});
			return true; //阻止默认返回行为
		}
	},
	onPullDownRefresh() {
		if (this.tabCurrentIndex) {
			this.initData(this.tabCurrentIndex);
		} else {
			this.initData(0);
		}
		// this.loadData(this.status);
	},
	onShow() {
		if (this.$options.filters.tipsToLogin()) {
			if (!this.tabCurrentIndex) {
				this.initData(0);
			}
		}
		// this.loadData(this.status);
	},

	onLoad(options) {
		/**
		 * 修复app端点击除全部订单外的按钮进入时不加载数据的问题
		 * 替换onLoad下代码即可
		 */
		let status = Number(options.status);
		this.status = status;

		this.tabCurrentIndex = status;
		// if (status == 0) {
		//   this.loadData(status);
		// }
	},

	watch: {
		/**监听更改请求数据 */
		tabCurrentIndex(val) {
			this.params.tag = this.orderStatus[val].orderStatus;
			//切换标签页将所有的页数都重置为1
			this.navList.forEach((res) => {
				res.pageNumber = 1;
				res.loadStatus = "more";
				res.orderList = [];
			});
			this.loadData(val);
		},
	},
	methods: {

		onClickLeft() {
			// 
			// uni.navigateTo({
			// 	url: "/pages/tabbar/user/my"
			// })

			uni.switchTab({
				url: "/pages/tabbar/user/my"
			})
			// uni.navigateBack();
		},
		// 售后
		applyService(order) {
			uni.navigateTo({
				url: `/pages/order/afterSales/afterSales?orderSn=${order.sn}`,
			});
		},

		// 店铺详情
		navigateToStore(val) {
			uni.navigateTo({
				url: "/pages/product/shopPage?id=" + val.storeId,
			});
		},

		/**
		 * 取消订单
		 */
		onCancel(sn) {

			uni.showLoading({
				title: "加载中",
			});
			cancelOrder().then((res) => {
				if (res.data.result.length >= 1) {
					this.cancelList = res.data.result;
				}
				if (this.$store.state.isShowToast) {
					uni.hideLoading()
				};
			});
		},

		/**
		 * 初始化数据
		 */
		initData(index) {
			this.navList[index].pageNumber = 1;
			this.navList[index].loadStatus = "more";
			this.navList[index].orderList = [];
			this.loadData(index);
		},

		/**
		 * 等待支付
		 */
		waitPay(val) {


			uni.navigateTo({
				url: `/pages/order/payorder?id=${val.id}&price=${val.allPrice}`
			})



		},

		/**
		 * 支付
		 */
		pay(val) {
			if (val) {
				// #ifdef MP-WEIXIN
				new LiLiWXPay({
					sn: val.sn,
					price: val.flowPrice,
					orderType: "ORDER",
				}).pay();
				// #endif
				// #ifndef MP-WEIXIN
				uni.navigateTo({
					url: "/pages/cart/payment/payOrder?order_sn=" + val,
				});
				// #endif
			}
		},

		/**
		 * 获取订单列表
		 */
		loadData(index) {
			this.params.pageNumber = this.navList[index].pageNumber;
			// this.params.tag = this.orderStatus[index].orderStatus;
			getOrderList({
				page: this.params.pageNumber,
				limit: 10,
				userId: storage.getUserInfo().id,
				type: Number(this.params.tag) + 1,
				isComent: 0
			}).then((res) => {
				uni.stopPullDownRefresh();
				if (res.data.list == []) {
					this.navList[index].loadStatus = "noMore";
					return false;
				}
				let orderList = res.data.list;
				if (orderList.length == 0) {
					this.navList[index].loadStatus = "noMore";
				} else if (orderList.length < 10) {
					this.navList[index].loadStatus = "noMore";
				}
				if (orderList.length > 0) {
					this.navList[index].orderList =
						this.navList[index].orderList.concat(orderList);
					this.navList[index].pageNumber += 1;
				}
			});
		},
		//swiper 切换监听
		changeTab(e) {
			this.tabCurrentIndex = e.target.current;
		},
		//顶部tab点击
		tabClick(index) {
			this.tabCurrentIndex = index;
		},
		//删除订单
		deleteOrder(index) {
			uni.showLoading({
				title: "请稍后",
			});
			setTimeout(() => {
				this.navList[this.tabCurrentIndex].orderList.splice(index, 1);
				if (this.$store.state.isShowToast) {
					uni.hideLoading()
				};
			}, 600);
		},
		//取消订单
		cancelOrder(item) {
			uni.showLoading({
				title: "请稍后",
			});
			setTimeout(() => {
				let {
					stateTip,
					stateTipColor
				} = this.orderStateExp(9);
				item = Object.assign(item, {
					state: 9,
					stateTip,
					stateTipColor,
				});

				//取消订单后删除待付款中该项
				let list = this.navList[1].orderList;
				let index = list.findIndex((val) => val.id === item.id);
				index !== -1 && list.splice(index, 1);
				if (this.$store.state.isShowToast) {
					uni.hideLoading()
				};
			}, 600);
		},

		//订单状态文字和颜色
		orderStateExp(state) {
			let stateTip = "",
				stateTipColor = this.$lightColor;
			switch (+state) {
				case 1:
					stateTip = "待付款";
					break;
				case 2:
					stateTip = "待发货";
					break;
				case 9:
					stateTip = "订单已关闭";
					stateTipColor = "#909399";
					break;

				//更多自定义
			}
			return {
				stateTip,
				stateTipColor,
			};
		},

		/**
		 * 跳转到订单详情
		 */
		navigateToOrderDetail(sn) {
			uni.navigateTo({
				url: "./orderDetail?sn=" + sn,
			});
		},

		/**
		 * 选择取消原因
		 */
		reasonChange(reason) {
			this.reason = reason;
		},

		/**
		 * 提交取消订单（未付款）
		 */
		submitCancel() {
			cancelOrder(this.orderSn, {
				reason: this.reason
			}).then((res) => {
				if (res.data.success) {
					uni.showToast({
						title: "订单已取消",
						duration: 2000,
						icon: "none",
					});
					this.initData(this.tabCurrentIndex);

					this.cancelShow = false;
				} else {
					uni.showToast({
						title: res.data.message,
						duration: 2000,
						icon: "none",
					});
					this.cancelShow = false;
				}
			});
		},

		/**
		 * 确认收货显示
		 */
		onRog(sn) {
			this.orderSn = sn;
			this.rogShow = true;
		},

		/**
		 * 点击确认收货
		 */
		confirmRog() {
			confirmReceipt({
				id: this.orderSn
			}).then((res) => {
				if (res.code == '000000') {
					uni.showToast({
						title: "已确认收货",
						duration: 2000,
						icon: "none",
					});
					this.initData(this.tabCurrentIndex);
					this.rogShow = false;
				}
			});
		},





	},
};
</script>

<style lang="scss" scoped>
page,
.content {
	background: $page-color-base;
	height: 100%;
}

.swiper-box {
	height: calc(100vh - 40px);
	// #ifdef H5
	height: calc(100vh - 40px - 44px);
	// #endif
}

.title {
	position: absolute;
	top: 80rpx;
	left: 50%;
	transform: translateX(-50%);
	font-family: PingFang;
	font-weight: bold;
	font-size: 33rpx;
	color: #FFFFFF;

}

.left-box {
	padding-left: 41rpx;
}


.list-scroll-content {
	height: 100%;
}

.navbar {
	display: flex;
	height: 40px;
	padding: 0 5px;
	background: #fff;
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
	position: relative;
	z-index: 10;

	.nav-item {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
		font-size: 26rpx;
		color: $font-color-light;
		position: relative;

		&.current {
			color: $main-color;

			&:after {
				content: "";
				position: absolute;
				left: 50%;
				bottom: 0;
				transform: translateX(-50%);
				width: 44px;
				height: 0;
				border-bottom: 2px solid $main-color;
			}
		}
	}
}

.uni-swiper-item {
	height: auto;
}

.seller-view {
	border-radius: 20rpx;
	background-color: #fff;
	margin: 20rpx 0rpx;

	.seller-info {
		height: 70rpx;
		padding: 0 20rpx;

		.seller-name {
			flex: 10;
			font-size: 28rpx;
			font-weight: 600;
			display: flex;
			flex-direction: row;

			.name {
				margin-left: 15rpx;
				margin-top: -2rpx;
			}
		}

		.order-sn {
			flex: 2;
			width: 120rpx;
			text-align: center;
			color: $aider-light-color;
			font-size: 26rpx;
		}
	}

	.goods-item-view {
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		padding: 10rpx 34rpx;

		position: relative;

		.goods-name {
			position: absolute;
			width: 389rpx;
			height: 55rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			font-size: 24rpx;
			color: #000000;
			line-height: 27rpx;
			left: 178rpx;
		}

		.goods-img {
			width: 131rpx;
			height: 131rpx;
			margin-right: 10rpx;
			margin-bottom: 10rpx;
		}

		.goods-price {
			font-size: 28rpx;
			margin-bottom: 10rpx;
			position: absolute;
			right: 31rpx;
		}

		.goods-num {

			font-family: Arial;
			font-weight: 400;
			font-size: 17rpx;
			color: #999999;
			position: absolute;
			top: 75rpx;
			right: 31rpx;
		}

		.goods-sku {
			font-family: Microsoft YaHei;
			font-weight: 400;
			font-size: 25rpx;
			color: #999999;
			position: absolute;
			top: 60rpx;
			left: 178rpx;
		}

		.goods-info {
			padding-left: 30rpx;
			flex: 1;

			.goods-title {
				margin-bottom: 10rpx;
				color: #333333;
			}

			.goods-specs {
				font-size: 24rpx;
				margin-bottom: 10rpx;
				color: #cccccc;
			}


		}


	}

	.shifukuan {
		width: 100%;
		height: 65rpx;
		line-height: 65rpx;
		font-family: Arial;
		font-weight: 400;
		font-size: 21rpx;
		color: #000000;
		padding-right: 20rpx;
		text-align: right;
	}

	.btn-view {
		padding: 25rpx 30rpx;
		font-size: 26rpx;

		.description {
			display: flex;
			color: #909399;
			size: 24rpx;
			flex: 1;

			.price {
				color: $main-color;

			}
		}
	}
}

.cancel-popup {
	.header {
		display: flex;
		flex-direction: row;
		justify-content: center;
		margin: 15rpx 0rpx;
	}

	.body {
		padding: 30rpx;

		.title {
			font-weight: 600;
		}

		.value {
			display: flex;
			flex-direction: column;
			margin: 20rpx 0;

			.radio-view {
				margin: 20rpx 0rpx;
			}
		}
	}

	.footer {
		text-align: center;
	}
}

.goods-btn {
	display: flex;
}

.cancel-btn,
.pay-btn,
.rebuy-btn {
	text-align: center;
	margin-left: 15rpx;
	font-size: 24rpx;
	padding: 14rpx 20rpx;
	border-radius: 100px;

}

.cancel-btn {
	color: #333639 !important;
	background: rgba(46, 51, 56, .05) !important;
}

.pay-btn {

	background-color: $light-color !important;

	color: #ffffff !important;
}

.rebuy-btn {
	color: $light-color !important;
	border-color: $light-color !important;
	background-color: #ffffff !important;
}
</style>
